<style>
    .out{
        background-color: #fff;
        border: 1px solid #888;
        width:99%;
        color:#444;
    }
</style>
<div class='title'>1.单选框</div>
<div class='text indent'>
    使用j-radio类来定义一个单选框。单选框可选的属性有 value 、checked 和 disabled。单选框不支持颜色与大小的改变。
    未使用单选框组包裹的单选框会被分配到一个默认的全局单选框组中。
    <div>value属性是设置单选框的值，如果没有设置value，则radio元素的html内容会设置为它的value。值得注意的是，在同一个单选框组中的单选框不同能有相同的value值，所以最好是对每个单选框设置一个值，如果都默认为空值，则会报错。</div>
    <div>checked属性是设置单选框是否被选中。</div>
    <div>disabled属性是设置单选框是否被禁用。</div>
    <div>jui-bind:radio一般都是在单选框组中使用绑定属性，若是单独在每个单选框上使用，则在同一个单选框组下的所有单选框只需要有一个绑定了数据源就行，否则会报错，且该数据是一个字符串型</div>
    <div>没有包裹在单选框组中的radio元素不支持jui-change属性。</div>
    请看一些例子：</div>
<div class="sub">
    <div class='text'>1.静态的单选框：</div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;!--使用icon-->
&lt;div class='j-radio' icon='pencil'>&lt;/div>
&lt;div class='j-radio'>是否&lt;/div>
&lt;div class='j-radio' value='yes'>&lt;/div>
&lt;div class='j-radio' disabled>好的&lt;/div>
&lt;div class='j-radio' checked>默认选中&lt;/div>
    </div>
    <div class="out">
        <div class='j-radio' icon='pencil'></div>
        <div class='j-radio'>是否</div>
        <div class='j-radio' value='yes'></div>
        <div class='j-radio' disabled>好的</div>
        <div class='j-radio' checked>默认选中</div>
    </div>
    <div class='text'>2.使用$jui方法改变checked：</div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;div class="j-radio-group">
    &lt;div class='j-radio' jdom='radio1'>单选&lt;/div>
    &lt;button jon='this.$jui("radio1").checked=true'>选中&lt;/button>
    &lt;button jon='this.$jui("radio1").checked=false'>取消选中&lt;/button>
&lt;/div>
    </div>
    <div class="out">
        <div class="j-radio-group">
            <div class='j-radio' jdom='radio1'>单选</div>
        </div>
        <button jon='this.$jui("radio1").checked=true'>选中</button>
        <button jon='this.$jui("radio1").checked=false'>取消选中</button>
    </div>

    <div class='text'>3.数据绑定的单选框：</div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;div class="j-radio-group" jui-bind='radio'>
    &lt;div class='j-radio'>A&lt;/div>
    &lt;div class='j-radio'>B&lt;/div>
    &lt;div class='j-radio'>C&lt;/div>
    &lt;div class='j-radio'>D&lt;/div>
&lt;/div>
&lt;div>
    &lt;button jon='this.radio="A"'>选A&lt;/button>
    &lt;button jon='this.radio="B"'>选B&lt;/button>
    &lt;button jon='this.radio="C"'>选C&lt;/button>
    &lt;button jon='this.radio="D"'>选D&lt;/button>
&lt;/div>
&lt;span j='radio'>"radio="+$&lt;/span>
&lt;script>
    new Jet({
        data:{
            radio:'C'
        }
    });
&lt;/script>
    </div>
    <div class="out">
        <div class="j-radio-group" jui-bind='radio'>
            <div class='j-radio'>A</div>
            <div class='j-radio'>B</div>
            <div class='j-radio'>C</div>
            <div class='j-radio'>D</div>
        </div>
        <div>
            <button jon='this.radio="A"'>选A</button>
            <button jon='this.radio="B"'>选B</button>
            <button jon='this.radio="C"'>选C</button>
            <button jon='this.radio="D"'>选D</button>
        </div>
        <span j='radio'>"radio="+$</span>
    </div>
</div>
<div class='title' jump-des='radioGroup'>2.单选框组</div>
<div class='text indent'>
    使用j-radio-group类来定义一个单选框组。
    <div>未使用单选框组包裹的单选框会被分配到一个默认的全局单选框组中。</div>
    <div>value属性是设置单选框的值，等价与直接在HTML中写值，只不过写在value属性里的值不会被显示出来。值得注意的是，在同一个单选框组中的单选框不同能有相同的value值，所以最好是对每个单选框设置一个值，如果都默认为空值，则会报错。</div>
    <div>checked属性是设置单选框是否被选中。</div>
    <div>disabled属性是设置单选框是否被禁用。</div>
    <div>jui-bind:在使用了单选框组的时候，必须在单选框组中使用绑定属性，若是没有使用单选框组，则只能绑定其中一个单选框，且该数据是一个字符串型</div>
    <div>单选框组支持jui-change。</div>
    请看一个例子：</div>
<div class="sub">
    <div class='j-code' disabled width='99%' height='auto'>
&lt;div class='j-radio-group' jui-bind='radioGroup' jui-change='change'>
    &lt;div class='j-radio'>A&lt;/div>
    &lt;div class='j-radio'>B&lt;/div>
    &lt;div class='j-radio'>C&lt;/div>
    &lt;div class='j-radio'>D&lt;/div>
&lt;/div>
&lt;span j='radioGroup'>"radioGroup="+$&lt;/span>
&lt;script>
    new Jet({
        data:{
            radioGroup:'B'
        },func:{
            change:function(opt){
                JUI.msg.info(opt.value);
            }
        }
    });
&lt;/script>
    </div>
    <div class="out">
        <div class='j-radio-group' jui-bind='radioGroup' jui-change='change'>
            <div class='j-radio'>A</div>
            <div class='j-radio'>B</div>
            <div class='j-radio'>C</div>
            <div class='j-radio'>D</div>
        </div>
        <span j='radioGroup'>"radioGroup="+$</span>
    </div>
    <div class='text'>radio group 对应的 JUI对象有以下以下几个方法：</div>
    <div class="list">
        <div>1.clear():清空当前radio group下的已选中的radio的选中状态</div>
        <div>2.remove(arg):删除当前group中的某一个radio，参数可以是radio对象或radio位于radio group的索引</div>
        <div>3.removeAll():删除当前group中的所有radio</div>
    </div>
</div>
<script>
    new Jet({
        data:{
            radio:'C',
            radioGroup:'B'
        },func:{
            change:function(opt){
                JUI.msg.info(opt.value);
            }
        }
    });
</script>